<script lang="ts" setup>
const props = defineProps({
  filterList: {
    type: Array,
    default: () => [],
  },
  multiSelect: {
    type: Boolean, // 支持多选
    default: false,
  },
  showType: {
    type: String, // 显示类型
  },
})
const emit = defineEmits(['change'])
const list = ref<any[]>([])
watch(() => props.filterList, () => {
  list.value = props.filterList
}, {
  deep: true,
  immediate: true,
})

// const filterList = computed<any[]>(() => props.filterList || [])
// watch(() => list.value, () => {
//   const currentData = list.value.reduce((acc, cur) => {
//     acc[cur.key] = cur.value
//     console.log(acc[cur.key])
//     return acc
//   }, {})
//   console.log(currentData)
//   emit('change', currentData)
// }, {
//   deep: true,
// })
const currentData = ref<any>({})
function valueChange(val: any, key: string) {
  if (!props.multiSelect) {
    currentData.value = {}
  }
  list.value.forEach((item) => {
    if (key === item.key) {
      // if(item.type=='array'){
      //   currentData.value[item.key] = [val]
      // }else{
      currentData.value[item.key] = val
      // }
    }
  })

  // console.log(key, currentData.value)
  emit('change', currentData.value)
}

watch(() => currentData.value, (val) => {
  list.value = list.value.map((item) => {
    item.value = val[item.key] || ''
    return item
  })
})
</script>

<template>
  <div class="filter-box m-y-20px">
    <PublicFilterItem v-for="(item, index) in list" :key="index" :config="item" :show-type="showType" :model-value="currentData?.[item.key] || ''" :list="item.options" :title="item.label" v-bind="$attrs" @update:model-value="valueChange($event, item.key)" />
  </div>
</template>

<style>

</style>
